<script lang="ts" setup>
import {onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import GoodsItem from '@/components/GoodsItem.vue'
import { useGoodsStore } from '@/stores/goods'



const router = useRouter()
const goodsStore = useGoodsStore()



const changeSelected = () => {
  goodsStore.isChangeAll(!goodsStore.all)
}

onUnmounted(() => {
  goodsStore.getGoodsList()
})

</script>

<template>
  <van-nav-bar fixed title="购物车" left-arrow @click-left="$router.go(-1)" />
  <div v-if="goodsStore.goodsList.length">
  <div class="fixeds" style="margin-top: 46px; padding-bottom: 50px">
    <GoodsItem v-for="item in goodsStore.goodsList" :key="item.id" :goods="item"></GoodsItem>
  </div>
  <div class="pay">
    <van-submit-bar :price="goodsStore.total * 100" button-text="提交订单" @submit="router.push('/pay')">
      <van-checkbox :model-value="goodsStore.all" @click="changeSelected">全选</van-checkbox>
    </van-submit-bar>
  </div>
</div>

  <van-empty v-else description="购物车为空" />
</template>

<style scoped lang="less">
.fixeds {
  margin-bottom: 50px;
}
.pay {
  margin-bottom: 50px !important;
}

.van-submit-bar {
  bottom: 50px !important;
}
</style>
